<template>
<!-- 查询条件 -->
 <table class="table" style="width: 600px;margin: 10px auto;">

        <tr>
            <td><p class="from-inline">
用户级别：<select v-model="form.ulId" class="form-control">
                    <option value="0">请选择</option>
                    <option v-for="item in userlevellist" :key="item.ulid" :value="item.ulid">{{ item.ulName}}</option>
            </select>
            会员编号：<input type="text" class="form-control" v-model="form.empCode">
            会员名称：<input type="text" class="form-control" v-model="form.empName">
            </p>
        </td>
        </tr>
        <tr>
            <td>
                手机号码:<input type="text" class="form-control" v-model="form.phone">
            身份证号码:<input type="text" class="form-control" v-model="form.idCard">
            <button class="btn btn-success" @click="getEmplist">查询</button>
            </td>
        </tr>
        
 </table>
 <table class="table table-bordered text-center">
           <tbody>
             <tr class="bg-primary">
                <td>会员编号</td>
                <td>会员名称</td>
                <td>性别</td>
                <td>手机号码</td>
                <td>身份证号码</td>
                <td>会员级别</td>
                <td>状态</td>
                <td>积分</td>
                <td>余额</td>
                <td>注册时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in emplist":key="item.empid">
                <td>{{item.empcode}}</td>
                <td>{{item.empName}}</td>
                <td>{{item.gender?"女":"男"}}</td>
                <td>{{ item.phone }}</td>
                <td>{{item.idcard}}</td>
                <td>{{item.userlevel.ulName}}</td>
                <td>{{item.state?"正常":"冻结"}}</td>
                <td>{{item.mark}}</td>
                <td>{{item.money}}</td>
                <td>{{item.regtime.replace("T","").substring(0,19)}}</td>
                <td>
                    <a href="javascript:void(0)" @click="upd(item.empid)">修改</a>
                    <a href="javascript:void(0)" @click="del(item.empid)" style="color: red;">删除</a>
                </td>
            </tr>
           </tbody>
        </table>
<!-- 会员列表 -->
</template>
<script setup lang ="ts">
//引入组件
import { ref, reactive, onMounted } from "vue"
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css"
// 路由
import { useRouter } from "vue-router"
import router from "@/router";

const rotuer = useRouter();
//变量
//查询条件
const form = reactive({
    ulId: "0",
    empName: "",
    empCode: "",
    phone: "",
    idCard:""
})
//会员级别列表(查询条件)
const userlevellist =ref([])
//会员列表
const emplist = ref ([])
//方法

// 修改
const upd = (id: number) => {
    //跳转
    router.push("/empupd?id=" + id);
}
const del = (id: number) => {
    //友好提示
    if(confirm("确定要进行逻辑删除吗？")){
        axios.delete("http://localhost:5123/api/UserInfo/EmpDel?id=" + id).then(res => {
            if (res.data > 0) {
                alert("删除成功");
                getEmplist();
            }
            else {
                alert("删除失败");
                return;
            }
        }).catch(err => {
            console.log(err);
        })
    }
}

// 返回查询条件
const getUserlevellist = () => {
    axios.get("http://localhost:5123/api/UserInfo/GetUserlevelList").then(res => {
        userlevellist.value = res.data;
    }).catch(err => {
        console.log(err);
    })
}
// 返回会员列表
const getEmplist = () => {
    axios.get("http://localhost:5123/api/UserInfo/GetEmpList", {
        params: {
            ulId: form.ulId,
            empName: form.empName,
            empCode: form.empCode,
            phone: form.phone,
            idCard:form.idCard
        }
    }).then(res => {
        emplist.value = res.data;
    }).catch(err => {
        console.log(err);
    })
}

//构造函数
onMounted(() => {
    getUserlevellist();
    getEmplist();
})
</script>